<template>

  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >

      <!--      <el-form-item label="供应商" prop="supplierId">-->
      <!--        <el-select-->
      <!--          v-model="queryParams.supplierId"-->
      <!--          clearable-->
      <!--          filterable-->
      <!--          placeholder="请选择供供应商"-->
      <!--          class="!w-240px"-->
      <!--        >-->
      <!--          <el-option-->
      <!--            v-for="item in supplierList"-->
      <!--            :key="item.id"-->
      <!--            :label="item.name"-->
      <!--            :value="item.id"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-row>
        <el-form-item label="客户" prop="customerId">
          <el-select
            v-model="queryParams.customerId"
            clearable
            filterable
            placeholder="请选择客户"
            class="!w-120px"
          >
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="完工日期" prop="orderTime">
          <el-date-picker
            v-model="queryParams.completeDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>

        <el-form-item label="产品名称" prop="no">
          <el-input
            v-model="queryParams.no"
            placeholder="请输入产品名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-160px"
          />
        </el-form-item>

        <el-form-item label="收款时间" prop="paymentTime">
          <el-date-picker
            v-model="queryParams.paymentTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>

        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
      </el-row>


      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="5">
          <el-button type="warning" plain   @click="getListByReceiptStatus(1)">未收款</el-button>
          <el-button type="primary" plain   @click="getListByReceiptStatus(3)">已收款</el-button>
        </el-col>

        <el-col :span="5">
          <el-button type="warning" plain   @click="getListByCheckStatus(1)">未对账</el-button>
          <el-button type="primary" plain   @click="getListByCheckStatus(3)">已对账</el-button>
        </el-col>

        <el-col :span="10">
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['erp:finance-receipt:create']"
          >
            <Icon icon="ep:plus" class="mr-5px"/>
            新增
          </el-button>
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['erp:finance-receipt:export']"
          >
            <Icon icon="ep:download" class="mr-5px"/>
            导出
          </el-button>
<!--          <el-button-->
<!--            type="danger"-->
<!--            plain-->
<!--            @click="handleDelete(selectionList.map((item) => item.id))"-->
<!--            v-hasPermi="['erp:finance-receipt:delete']"-->
<!--            :disabled="selectionList.length === 0"-->
<!--          >-->
<!--            <Icon icon="ep:delete" class="mr-5px"/>-->
<!--            删除-->
<!--          </el-button>-->
        </el-col>

      </el-row>

      <el-row class="mt-15px">
        <el-button @click="handleBatchReceipt" type="primary">批量收款</el-button>

        <el-button @click="handleBatchCheck" type="primary">批量对账</el-button>
        <el-button @click="handleBatchCancelCheck" type="danger">批量撤销对账</el-button>
      </el-row>


    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :summary-method="getSummaries" show-summary
      border
      :stripe="true"
      :show-overflow-tooltip="true"
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column width="40" label="选择" type="selection"/>
      <el-table-column min-width="180" label="收款单号" align="center" prop="no"/>
      <el-table-column label="客户"  prop="customerName"/>
      <el-table-column label="车牌号"  prop="plate"/>
      <el-table-column label="产品名称" min-width="200px" prop="productNames">
        <template #default="scope">

          <div
            v-for="(item, index) in  getProductName(scope.row)"
            :key="index"
            style="margin-right: 5px;display: block;vertical-align: middle;line-height: 20px;margin-bottom: 10px;cursor: pointer"
          >
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center" prop="totalPrice"/>
      <el-table-column label="已收" align="center" prop="receiptAmount"/>
<!--      <el-table-column label="收款状态" align="center" prop="receiptStatus">-->
<!--        <template #default="scope">-->
<!--          <dict-tag :type="DICT_TYPE.ERP_RECEIPT_STATUS" :value="scope.row.receiptStatus"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="收款状态" align="center" fixed="left" width="90" prop="receiptStatus">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.DISPATCH_RECEIPT_STATUS" :value="scope.row.receiptStatus"/>
        </template>
      </el-table-column>
      <el-table-column
        label="收款时间"
        align="center"
        prop="receiptTime"
        :formatter="dateFormatter2"
        width="120px"
      />
      <el-table-column label="对账状态" align="center" width="90" prop="checkStatus">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.DISPATCH_CHECK_STATUS" :value="scope.row.checkStatus"/>
        </template>
      </el-table-column>
      <el-table-column
        label="对账时间"
        align="center"
        prop="checkDate"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column label="收款账户" width="120" align="center" prop="accountName"/>
      <el-table-column label="开票" align="center" prop="invoiceStatus">
        <template #default="scope">
          <dict-tag style="cursor: pointer" @click="handleInvoiceStatusClick(scope.row)"
                    :type="DICT_TYPE.ERP_INVOICE_STATUS" :value="scope.row.invoiceStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="开票日期" min-width="120px" align="center" prop="invoiceDate" :formatter="dateFormatter2"/>
      <el-table-column label="创建人" align="center" prop="creatorName"/>
      <el-table-column label="状态" align="center" fixed="right" width="90" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="220">
        <template #default="scope">
          <el-button
            link
            @click="openForm('detail', scope.row.id)"
            v-hasPermi="['erp:finance-receipt:query']"
          >
            详情
          </el-button>
<!--          <el-button-->
<!--            link-->
<!--            type="primary"-->
<!--            @click="openForm('update', scope.row.id)"-->
<!--            v-hasPermi="['erp:finance-receipt:update']"-->
<!--            :disabled="scope.row.status === 20"-->
<!--          >-->
<!--            编辑-->
<!--          </el-button>-->
          <el-button
            link
            type="primary"
            @click="handleUpdateStatus(scope.row.id, 20)"
            v-hasPermi="['erp:finance-receipt:update-status']"
            v-if="scope.row.status === 10"
          >
            收款
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleUpdateStatus(scope.row.id, 10)"
            v-hasPermi="['erp:finance-receipt:update-status']"
            v-else
          >
            反审批
          </el-button>
<!--          <el-button-->
<!--            link-->
<!--            type="danger"-->
<!--            @click="handleDelete([scope.row.id])"-->
<!--            v-hasPermi="['erp:finance-receipt:delete']"-->
<!--          >-->
<!--            删除-->
<!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <FinanceReceiptForm ref="formRef" @success="getList"/>
</template>

<script setup lang="ts">
import {getIntDictOptions, DICT_TYPE} from '@/utils/dict'
import {dateFormatter2,dateFormatter} from '@/utils/formatTime'
import download from '@/utils/download'
import {FinanceReceiptApi, FinanceReceiptVO} from '@/api/erp/finance/receipt'
import FinanceReceiptForm from './FinanceReceiptForm.vue'
import {UserVO} from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import {erpPriceInputFormatter, erpPriceTableColumnFormatter} from '@/utils'
import {SupplierApi, SupplierVO} from '@/api/erp/purchase/supplier'
import {AccountApi, AccountVO} from '@/api/erp/finance/account'
import {CustomerApi, CustomerVO} from "@/api/erp/sale/customer";
import {ref} from "vue";
import {FinancePaymentApi} from "@/api/erp/finance/payment";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {string} from "vue-types";
import {ReceiptApi} from "@/api/dispatch/receipt";

/** ERP 收款单列表 */
defineOptions({name: 'ErpPurchaseOrder'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<FinanceReceiptVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  no: undefined,
  receiptTime: [],
  supplierId: undefined,
  receiptStatus:undefined,
  creator: undefined,
  financeUserId: undefined,
  accountId: undefined,
  ids:[],
  status: undefined,
  remark: undefined,
  bizNo: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const customerList = ref<CustomerVO[]>([]) // 客户列表
const userList = ref<UserVO[]>([]) // 用户列表
const accountList = ref<AccountVO[]>([]) // 账户列表

const sumPrice = ref(0);
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await FinanceReceiptApi.getFinanceReceiptPage(queryParams)
    list.value = data.list
    sumPrice.value = data.extendStr
    total.value = data.total
  } finally {
    loading.value = false
  }
}


const popoverVisible = ref();
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const closePopover = async () => {
  popoverVisible.value = null;
}
const handleRightClick = (id) => {
  popoverVisible.value = id;
};
/**
 * 批量对账
 */
const handleBatchCheck = async () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error('请选择要对账的订单');
    return;
  }
  let loading;
  try {

    await message.confirm('是否确认批量对账？', '批量对账')

    loading = ElLoading.service({
      lock: true,
      text: '批量对账中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })

    await FinanceReceiptApi.handleBatchCheck(multipleSelection.value)
    message.success(t('处理成功'))
    // 刷新列表
    await getList()
  } catch {
  } finally {
    multipleTableRef.value!.clearSelection()
    loading.close()
    popoverVisible.value = null;
  }
}

/**
 * 批量撤销对账
 */
const handleBatchCancelCheck = async () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error('请选择要撤销对账的订单');
    return;
  }
  let loading;
  try {

    await message.confirm('是否确认批量撤销对账？', '批量撤销对账')

    loading = ElLoading.service({
      lock: true,
      text: '撤销对账中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })

    await FinanceReceiptApi.handleBatchCancelCheck(multipleSelection.value)
    message.success(t('处理成功'))
    await getList()
  } catch {
  } finally {
    multipleTableRef.value!.clearSelection()
    loading.close()
    popoverVisible.value = null;
  }
}



/**
 * 批量收款
 */
const handleBatchReceipt = async () => {

  if (multipleSelection.value.length == 0) {
    ElMessage.error('请选择要收款的订单');
    return;
  }

  let loading;
  ElMessageBox.confirm('确定批量收款吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    loading = ElLoading.service({
      lock: true,
      text: '处理中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    await FinanceReceiptApi.batchReceipt(multipleSelection.value);
    ElMessage.success('处理成功');
  }).finally(() => {
    multipleTableRef.value!.clearSelection()
    getList();
    loading.close();
  })
}


const getSummaries = (param) => {

  const {columns, data} = param
  const sums: string[] = []
  columns.forEach((column, index: number) => {

    if (['totalPrice'].includes(column.property)) {
      sums[index] = '' + erpPriceInputFormatter(sumPrice.value);
    } else {
      sums[index] = ''
    }
  })

  return sums
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const  getListByReceiptStatus= async (receiptStatus) => {
  queryParams.receiptStatus = receiptStatus;
  await getList()
}


const  getListByCheckStatus= async (checkStatus) => {
  queryParams.checkStatus = checkStatus;
  await getList()
}

/**
 * 获取产品名称信息
 * @param row
 */
const getProductName = (row) => {
  let items = row.items;
  let names = [];
  for (const key in items) {
    names = names.concat(items[key].productNames);
  }
  return names;
}

/** 开票情况点击 */
const handleInvoiceStatusClick = async (row) => {
  const {id, invoiceStatus} = row
  const status = invoiceStatus === 1 ? 2 : 1;
  try {
    // 审批的二次确认
    await message.confirm(`确定${invoiceStatus === 1 ? '开票' : '取消开票'}该收款单吗？`)
    // 发起审批
    await FinanceReceiptApi.updateFinanceReceiptInvoiceStatus(id, status)
    message.success(`${invoiceStatus === 1 ? '开票' : '取消开票'}成功`)
    // 刷新列表
    await getList()
  } catch {
  }
}


/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.receiptStatus = undefined
  queryParams.ids =[];
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (ids: number[]) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await FinanceReceiptApi.deleteFinanceReceipt(ids)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
    selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
  } catch {
  }
}

/** 审批/反审批操作 */
const handleUpdateStatus = async (id: number, status: number) => {
  try {
    // 审批的二次确认
    await message.confirm(`确定${status === 20 ? '审批' : '反审批'}该收款单吗？`)
    // 发起审批
    await FinanceReceiptApi.updateFinanceReceiptStatus(id, status)
    message.success(`${status === 20 ? '审批' : '反审批'}成功`)
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await FinanceReceiptApi.exportFinanceReceipt(queryParams)
    download.excel(data, '收款单.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

// const multipleTableRef = ref()
/** 选中操作 */
const selectionList = ref<FinanceReceiptVO[]>([])
// const handleSelectionChange = (rows: FinanceReceiptVO[]) => {
//   selectionList.value = rows
// }

const route = useRoute();
/** 初始化 **/
onMounted(async () => {
  //初始化ids
  queryParams.ids = null;

  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }
  handleQuery();
  // 加载供应商、用户、账户
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  userList.value = await UserApi.getSimpleUserList()
  // 加载客户列表
  customerList.value = await CustomerApi.getCustomerSimpleList()
  accountList.value = await AccountApi.getAccountSimpleList()
})
onActivated(() => {
  //初始化ids
  queryParams.ids = null;

  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }

  popoverVisible.value = null;

  handleQuery();
});
// TODO eGlass：可优化功能：列表界面，支持导入
// TODO eGlass：可优化功能：详情界面，支持打印
</script>
